<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
>

<html lang="en">
<head>
	<head th:include="header::header"></head>
	<title>普惠商城-个人中心-账户设置-收货地址</title>
	<!-- 个人中心通用样式personal.css -->
	<link rel="stylesheet" th:href="@{/css/personal-accountsettings.css}">
	<style>
		select {
			margin-right: 19px;
			padding-left:15px;
		}
		.login_box_2 {
			width: 630px!important;
		}
		.add_addres {
			width: 610px;
		}
	</style>
</head>
<body>

<!-- 顶部导航条开始 -->
<div  th:include="personal/personalhead::order-personalhead-nav"></div>
<!-- 顶部导航条结束 -->
<!-- 顶部搜索栏部分开始 -->
<div  th:include="personal/personalsearch::order-personalsearch-nav"></div>
<!--个人中心中间主体框架  -->
<div class="centerbody personal_middle">
	<!-- 左侧通用导航栏 -->
	<div class="personal_middle_nav" th:include="commonfragment::order-left-menu-nav"></div>
	<div class="personal_middle_main">
		<div class="personal_middle_main_tit">
			<span>账户设置</span>><span>收货地址</span>
		</div>
		<div class="personal_middle_main_box notice" style="padding:0px">
			<div class="ac_addr_tit">我的收货地址<input type="button" class="add_addr_btn" value="新增收货地址"></div>
			<ul style="margin-left: 19px;width: 1020px;">
				<li  th:each="userAddress : ${userAddressList}">
					<input type="button" class="default_set" th:isDefault="${userAddress.isDefault}" th:id="${userAddress.id}"  value="设为默认地址">
					<p class="addr_name" th:text="${userAddress.contact}">安吉</p>
					<p class="addr_location" th:text="${userAddress.province} + ${userAddress.city} + ${userAddress.area}">重庆市 重庆江北区</p>
					<p class="addr_addr" th:text="${userAddress.addressDetail}">江北区洋河路11号</p>
					<p class="addr_tel" th:text="${userAddress.telPhone}">15046824671</p>
					<div class="edit">
						<input type="button" class="modify"  th:id="${userAddress.id}" onclick="modifyAddress(this);" value="修改">
						<input type="button" class="del "  th:id="${userAddress.id}"  onclick="deleteAddress(this);" value="删除">
					</div>
				</li>
				<div style="clear: both"></div>
			</ul>
		</div>
	</div>
	<div style="clear:both;"></div>
</div>
<!-- 弹窗部分 -->
<div class="shadow">
</div>
<div class="login_box_2 add" style="background: #fff;">
	<form  id="addForm" class="siteForm" >
		<div class="add_addres">
			<span class="add_tit">添加联系地址</span>
			<img th:src="@{/images/叉.png}" alt="" class="cancel_small">
		</div>

		<p><label for="" style="padding-left: 87px;"><span class="necessarily">*</span>联系人</label><input name="contact" type="text" class="inputbox user"></p>
		<p><label for="" style="padding-left: 87px;"><span class="necessarily">*</span>手机号</label><input name="telPhone" type="text" class="inputbox tel" maxlength="11"></p>
		<div style="position: relative;padding-left: 87px;margin-top: 20px;">
			<tr>
				<td style="width: 65px;color: #3f3f3f; padding-right: 40px;font-size: 14px;"><span class="necessarily">*</span>区域<span style="margin-left: 25px;" id="area_div"></span></td>
			</tr>
		</div>
		<label for="" style="padding-left: 87px;"><span class="necessarily">*</span>详细地址</label><input name="address" type="text" class="inputbox tel" style="margin-left: 12px;" >
		<p style="text-align: center;">
			<button  id="insertOrderAddress" class="inputbox btn" type="button" value="保存" style="font-size: 14px;">保存</button>
		</p>
	</form>
</div>

<div class="login_box_2 update" style="background: #fff;">
	<form id="updateForm" method="post">
		<div class="add_addres">
			<span class="add_tit">修改联系地址</span>
			<img th:src="@{/images/叉.png}" alt="" class="cancel_small">
		</div>
		<input name="id" type="hidden" >
		<input name="isdefault" type="hidden" >
		<p><label for="" style="padding-left: 87px;"><span class="necessarily">*</span>联系人</label><input name="contact" type="text" class="inputbox user"></p>
		<p><label for="" style="padding-left: 87px;"><span class="necessarily">*</span>手机号</label><input name="telPhone" type="text" class="inputbox tel" maxlength="11"></p>
		<div style="position: relative;padding-left: 87px;margin-top: 20px;">
			<tr>
				<td style="width: 65px;color: #3f3f3f; padding-right: 40px;font-size: 14px;"><span class="necessarily">*</span>区域<span style="margin-left: 25px;" id="area_div_update"></span></td>
			</tr>
		</div>
		<label for="" style="padding-left: 87px;"><span class="necessarily">*</span>详细地址</label><input name="address" type="text" class="inputbox tel" style="margin-left: 12px;" >
		<p style="text-align: center;">
			<button id="updateAddress" onclick="update()" type="button" class="inputbox btn" value="保存" style="font-size: 14px;">保存</button>
		</p>
	</form>

</div>


<!-- 页面底部 -->
<div th:include="footer::footer"></div>
</body>
<script th:src="@{/js/area.js}"></script>
<script th:inline="javascript">
    $(function(){
        $('.cancel_small').click(function(){
            $('.shadow').css('display','none');
            $('.login_box_2').css('display','none');
            $("#insertOrderAddress").recursiveParentNode("form").formEmpty();
            $("#updateAddress").recursiveParentNode("form").formEmpty();
        })

        $('.add_addr_btn').click(function(){
            //区域事件

            areaAll({
                url: "/shopping/merchant/getAllPosition",
                totalSelect: 3,
                DivId: "area_div",
                selectWidthArr: ["128px", "128px", "128px"],
                areaArr: ["", "", ""],
                idArr: ["province", "city", "area"]
            });
            $('#area_div').blur(function () {
                var $this = $(this);
                if ($("input[name='deliveryType']").val() === 1) {
                    return false;
                }
                if ($this.find("select[name='province']").val() === '' || $this.find("select[name='city']").val() === '' || $this.find("select[name='area']").val() === '') {
                    $('.area_msg').text('请选择市区县内容！');
                } else {
                    $('.area_msg').text('');
                }
            });
            $('.shadow').css('display','block');
            $('.add').css('display','block');
        })

        $('.shadow').css('height',$(window).height());
        $('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
        $('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
        $(window).resize(function(){
            $('.shadow').css('height',$(window).height());
            $('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
            $('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
        })

        $('input.default_set').each(function(){
            var isDefault = $(this).attr('isDefault');
            if (isDefault && isDefault == 1) {
                setCss(this);
            }
            $(this).click(function(){
                //提交设置成默认地址

                var id = $(this).attr("id");
                setDefault(id,this);
            });
        })

        function setCss(This) {
            $(This).addClass('addr_default').parent().siblings().find('input.default_set').removeClass('addr_default');
            $(This).attr('value','默认地址').parent().siblings().find('input.default_set').attr('value','设为默认地址');
            $(This).parent().find('div.edit').addClass('edit_default').parent().siblings().find('div.edit').removeClass('edit_default');
            $(This).parent().addClass('default').siblings().removeClass('default');
            // $('div.edit').addClass('edit_default').siblings().removeClass('edit_default');

            $(This).parent().find('div.edit input.del').addClass('del_default');
            $(This).parent().siblings().find('.del').removeClass('del_default');
        }
        //设置默认地址

        function setDefault(id,This) {
            var d= $(This).attr('isDefault');
            if (d && d != 1) {
                $.post("/address/setDefaultAddress", { id: id},
                    function (data) {
                        if (data.success) {
                            setCss(This);
                        } else {
                            Common.alert(data.message)
                        }
                    })
			}

        }

        $('#area_div_update').blur(function () {
            var $this = $(this);
            if ($this.find("select[name='province']").val() === '' || $this.find("select[name='city']").val() === '' || $this.find("select[name='area']").val() === '') {
                $('.area_msg').text('请选择市区县内容！');
            } else {
                $('.area_msg').text('');
            }
        });


        //弹窗添加收货地址

        $("#insertOrderAddress").on("click", function () {
            if (isNull($("input[name='contact']").val())) {
                Common.alert("请输入联系人");
                return false;
            }
            if (isNull($("input[name='telPhone']").val())) {
                Common.alert("请输入手机号码");
                return false;
            }
            var reg = /^\d{11}$/;
            if (!reg.test($("input[name='telPhone']").val())) {
                Common.alert("请输入正确的手机号");
                return false;
            }
            if (isNull($("select[name='province']").val())) {
                Common.alert("请选择省份");
                return false;
            }
            if (isNull($("select[name='city']").val())) {
                Common.alert("请选择城市");
                return false;
            }
            if (isNull($("select[name='area']").val())) {
                Common.alert("请选择区域");
                return false;
            }
            if (isNull($("input[name='address']").val())) {
                Common.alert("请输入详细地址");
                return false;
            }
            //新增地址

            $.ajax({
                async       : false,
                type 		: "POST",
                url		    : "/address/insertAddress",
                data 		: getForm('#addForm'),
                success 	: function( d ) {
                    if(d.success){
                        $('.cancel_small').click();
                        window.location.href = window.location.href;//刷新当前页面
                    } else {
                        Common.alert(d.message);
                    }
                }
            });
        });
    });

    //删除

    function deleteAddress(This){
        layer.confirm('是否删除该地址？', {
            btn: ['是','否'] //按钮

        }, function(){
            var id = $(This).attr("id");
            $.post("/address/deleteAddress", { id: id},
                function (data) {
                    if (data.success) {
                        window.location.href = window.location.href;//刷新当前页面
                    } else {
                        Common.alert(data.message)
                    }
                })
        });
    }

    //修改地址数据回显

    function modifyAddress(This) {
        var id = $(This).attr("id");
        $.post("/address/detail", { id: id},
            function (data) {
                if (data.success) {
                    //数据赋值
                    var addressData = data.data;
                    var $updateForm = $("#updateForm");
                    $("input[name='contact']",$updateForm).val(addressData.contact);
                    $("input[name='telPhone']",$updateForm).val(addressData.telPhone);
                    $("input[name='address']",$updateForm).val(addressData.address);
                    $("input[name='id']",$updateForm).val(addressData.id);
                    $("input[name='isdefault']",$updateForm).val(addressData.isdefault);
                    var _data = {};
                    _data.province =addressData.province;
                    _data.city =addressData.city;
                    _data.area =addressData.area;
                    //弹窗区域事件

                    areaAll({
                        url: "/shopping/merchant/getAllPosition",
                        totalSelect: 3,
                        DivId: "area_div_update",
                        selectWidthArr: ["128px", "128px", "128px"],
                        areaArr: ["", "", ""],
                        idArr: ["province", "city", "area"],
                        data:_data
                    });
                    $('.shadow').css('display','block');
                    $('.update').css('display','block');
                } else {
                    Common.alert(data.message)
                }
            })
    }
    //弹窗修改收货地址

    function update() {
        var $updateForm = $("#updateForm");
        if (isNull($("input[name='contact']",$updateForm).val())) {
            Common.alert("请输入联系人");
            return false;
        }
        if (isNull($("input[name='telPhone']",$updateForm).val())) {
            Common.alert("请输入手机号码");
            return false;
        }
        var reg = /^\d{11}$/;
        if (!reg.test($("input[name='telPhone']",$updateForm).val())) {
            Common.alert("请输入正确的手机号");
            return false;
        }
        if (isNull($("select[name='province']",$updateForm).val())) {
            Common.alert("请选择省份");
            return false;
        }
        if (isNull($("select[name='city']",$updateForm).val())) {
            Common.alert("请选择城市");
            return false;
        }
        if (isNull($("select[name='area']",$updateForm).val())) {
            Common.alert("请选择区域");
            return false;
        }
        if (isNull($("input[name='address']",$updateForm).val())) {
            Common.alert("请输入详细地址");
            return false;
        }
        $.ajax({
            async       : false,
            type 		: "POST",
            url		    : "/address/update",
            data 		: getForm('#updateForm'),
            success 	: function( d ) {
                if(d.success){
                    $('.cancel_small').click();
                    window.location.href = window.location.href;
                } else {
                    Common.alert(d.message);
                }
            }
        });
    }

    function getForm(id) {
        var $form = $(id);
        var data = {
            contact : $("input[name='contact']",$form).val(),
            telPhone : $("input[name='telPhone']",$form).val(),
            province : $form.find("select[name='province']").find("option:selected").attr("data-area-code"),
            city : $form.find("select[name='city']").find("option:selected").attr("data-area-code"),
            area : $form.find("select[name='area']").find("option:selected").attr("data-area-code"),
            positionId: $form.find("select[name='area']").val(),
            address : $("input[name='address']",$form).val(),
            id : $("input[name='id']",$form).val(),
            isdefault : $("input[name='isdefault']",$form).val()
        };
        return data;
    }
</script>
</html>